<template>
  <div>
    <el-space direction="vertical" alignment="left" style="width: 100%">
      <el-card>
        <el-form ref="searchFormComponents" :model="searchForm" inline>
          <el-form-item label="名称" prop="name">
            <el-input v-model="searchForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="productTypeId">
            <el-select v-model="searchForm.productTypeId" placeholder="请选择" clearable filterable
                       style="width: 150px">
              <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in productTypeList"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
            <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
        <el-space>
          <el-button type="primary" @click="add" :icon="Plus">新增</el-button>
          <el-button type="danger" :icon="Delete" @click="batchDelete(null)" :disabled="selectionRows.length<=0">
            批量删除
          </el-button>
        </el-space>
      </el-card>
      <el-card>
        <el-table ref="tableComponents"
                  :data="listData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="selectionChange"
                  border>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="ID" width="50"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="mainImg" label="封面图">
            <template #default="scope">
              <el-image v-if="scope.row.mainImg" style="width: 100px; height: 100px" :src="scope.row.mainImg"
                        :preview-src-list="[scope.row.mainImg]" :preview-teleported="true"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="imgList" label="详细图片">
            <template #default="scope">
              <el-image v-if="scope.row.imgList" style="width: 100px; height: 100px"
                        :src="scope.row.imgList.split('，')[0]" :preview-src-list="scope.row.imgList.split('，')"
                        :preview-teleported="true"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="productTypeName" label="分类名称"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="stock" label="库存"></el-table-column>
          <el-table-column prop="salesVolume" label="销量"></el-table-column>
          <el-table-column prop="shopName" label="商家名称"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button :icon="Edit" @click="edit(scope.$index, scope.row)">编辑</el-button>
              <el-button :icon="Delete" type="danger" @click="deleteOne(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-pagination
              @current-change="currentChange"
              @size-change="sizeChange"
              :page-size="pageInfo.pageSize"
              :current-page="pageInfo.pageNum"
              background
              layout="total,sizes, prev, pager, next"
              :total="pageInfo.total">
          </el-pagination>
        </div>
      </el-card>
    </el-space>
    <el-dialog
        v-model="dialogOpen"
        v-if="dialogOpen"
        :title="formData.id?'编辑':'新增'"
        width="800"
    >
      <el-form ref="formRef" :model="formData" label-width="100px" inline>
        <slot name="content">
          <el-form-item label="名称" prop="name"
                        :rules="[{required:true,message:'不能为空',trigger:[ 'blur','change']}]">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="小分类" prop="productTypeId" :rules="[{required:true,message:'不能为空',trigger:['blur','change']}]">
            <el-select v-model="formData.productTypeId" placeholder="请选择" filterable>
              <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in productTypeList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="价格" prop="price"
                        :rules="[{required:true,message:'不能为空',trigger:[ 'blur','change']}]">
            <el-input v-model="formData.price"></el-input>
          </el-form-item>
          <el-form-item label="库存" prop="stock"
                        :rules="[{required:true,message:'不能为空',trigger:[ 'blur','change']}]">
            <el-input v-model="formData.stock"></el-input>
          </el-form-item>
          <el-form-item label="封面图" prop="mainImg"
                        :rules="[{required:true,message:'不能为空',trigger:[ 'blur','change']}]" style="width: 100%">
            <MyUpLoad type="imageCar" :limit="1" :files="formData.mainImg" @setFiles="(date)=>{formData.mainImg =date;console.log(formData.mainImg)}"
                      v-if="dialogOpen"></MyUpLoad>
          </el-form-item>
          <el-form-item label="详细图片" prop="imgList"
                        :rules="[{required:true,message:'不能为空',trigger:[ 'blur','change']}]" style="width: 100%">
            <MyUpLoad type="image" :limit="5" :files="formData.imgList" @setFiles="handleImgListChange"
                      v-if="dialogOpen"></MyUpLoad>
          </el-form-item>
          <el-form-item label="简介" prop="subTitle"
                        :rules="[{required:true,message:'不能为空',trigger:[ 'blur','change']}]">
            <MyEditor :content="formData.subTitle" @content-change="formData.subTitle =$event" v-if="dialogOpen"></MyEditor>
          </el-form-item>
        </slot>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit" :icon="Check">提交</el-button>
          <el-button @click="closeDialog" :icon="Close">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import request from "@/utils/http.js";
import {Check, Close, Delete, Edit, Refresh, Plus, Search} from '@element-plus/icons-vue'
import {ref, toRaw, onMounted, computed} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import MyEditor from "@/components/MyEditor.vue";
import MyUpLoad from "@/components/MyUpload.vue";

const searchFormComponents = ref();
const tableComponents = ref();
const listData = ref([]);
const pageInfo = ref({
  //当前页
  pageNum: 1,
  //分页大小
  pageSize: 10,
  //总条数
  total: 0
});
const searchForm = ref({
  name: undefined,
  productTypeId: undefined,
  shopId: undefined,
});

const productTypeList = ref([]);

onMounted(() => {
  getProductTypeList();
  getPageList();
});

function getProductTypeList() {
  request.get("/api/productType/list",{qwe:0}).then(res => {
    if (res.code === 1) {
      productTypeList.value = res.data;
    } else {
      ElMessage.error("获取分类列表失败");
    }
  }).catch(error => {
    ElMessage.error("获取分类列表失败: " + error.message);
  });
}

getPageList()

/**
 * 获取分页数据
 */
function getPageList() {
  let data = Object.assign(toRaw(searchForm.value), toRaw(pageInfo.value))
  request.get("/api/product/page", {
    params: data
  }).then(res => {
    listData.value = res.data.list
    pageInfo.value.total = res.data.total
  })
}

/**
 * 选择分页
 * @param e
 */
function currentChange(e) {
  pageInfo.value.pageNum = e
  getPageList()
}

/**
 * 改变分页数量
 * @param e
 */
function sizeChange(e) {
  pageInfo.value.pageSize = e
  getPageList()
  console.log(e)
}

/**
 * 搜索
 */
function search() {
  pageInfo.value.pageNum = 1
  getPageList()
}

/**
 * 重置搜索框
 */
function resetSearch() {
  searchFormComponents.value.resetFields();
  getPageList()
}

const dialogOpen = ref(false);
const formData = ref({});
const formRef = ref();

/**
 * 新增
 */
function add() {
  formData.value = {}
  dialogOpen.value = true
}

/**
 * 编辑
 * @param index
 * @param row
 */
function edit(index, row) {
  formData.value = Object.assign({}, row);
  if (formData.value.imgList) {
    console.log('Editing imgList:', formData.value.imgList);
  }
  dialogOpen.value = true;
}

/**
 * 关闭弹框
 */
function closeDialog() {
  dialogOpen.value = false
}

/**
 * 提交数据
 */
function submit() {
  formRef.value.validate((valid) => {
    if (!valid) {
      ElMessage({
        message: "验证失败，请检查表单!",
        type: 'warning'
      });
      return
    }
    //新增
    if (!formData.value.id) {
      request.post("/api/product/add", formData.value).then(res => {
        if (!res) {
          return
        }
        dialogOpen.value = false
        ElMessage({
          message: "操作成功",
          type: 'success'
        });
        getPageList()
      })
    } else {
      //更新
      console.log(formData)
      request.put("/api/product/update", formData.value).then(res => {
        if (!res) {
          return
        }

        dialogOpen.value = false
        ElMessage({
          message: "操作成功",
          type: 'success'
        });
        getPageList()
      })
    }
  })
}

const selectionRows = ref([]);

/**
 * 多选
 * @param rows
 */
function selectionChange(rows) {
  selectionRows.value = rows
}

/**
 * 单个删除
 * @param index
 * @param row
 */
function deleteOne(index, row) {
  batchDelete([row])
}

/**
 * 批量删除
 * @param rows
 */
function batchDelete(rows) {
  if (!rows) {
    rows = selectionRows.value;
  }
  let ids = rows.map(item => item.id);
  ElMessageBox.confirm(`此操作将永久删除ID为[${ids}]的数据, 是否继续?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }).then(() => {
    request.delete("/api/product/delBatch", {data: ids}).then(res => {
      if (!res) {
        return
      }
      ElMessage({
        message: "操作成功",
        type: 'success'
      });
      getPageList()
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
    tableComponents.value.clearSelection();
  });
}

function handleImgListChange(val) {
  formData.value.imgList = val;
  console.log('Updated imgList:', val);
}
</script>

<style scoped>

</style>
